<template>
　　<div id="watch">
        firstName:<input type="text" name="li"  v-model="firstName">
        <br>
        lastName:<input type="text" name="fei"  v-model="lastName">
        <p>fullName: {{fullName}}</p>
        <a href="javascript:;" @click="testZip()">test</a>
        <!--上传头像-->
        <div style="margin-bottom: 20px">
            <h2>选择图片</h2>
            <a id='addPic' href="" v-on:click="addPic">添加图片 </a>
            <input type="file" @change="onFileChange"  style="display: none;" accept=".jpg, .png">
        </div>
        <div v-if="images.length >0">
           <ul>
              <li>
                 <img :src="images" @click='delImage()' style="width:100px;height:100px;"/>
                 <a href="javascript:;" style="position: absolute;" @click='delImage()'>
                    <span class="glyphicon glyphicon-remove"></span>
                </a>
              </li>
           </ul>
            <button @click="delImage">移除全部图片</button>
            <button @click='uploadImage' >上传</button>
        </div>
		<!--<iframe src="http://192.168.1.182:32777" name=""></iframe>--> 
	</div>
</template>
<script>
	import headTop from '@/components/headTop'
	import {urlDataDetail} from '../api/api'
	import {unzip} from '../assets/js/common'
	//vuescroll
//	import nicescroll from 'nicescroll'
	
　　 export default {
　　　　　　data(){
　　　　　　　　return {
	　　　　　　　　   firstName: 'a',
	                 lastName: 'fei',
	                 fullName: 'a fei',
	                images:'',
	                src:'',
	                num:4,
　　　　　　　　}
　　　　　　},
			components:{
		    	headTop,
		    },
			mounted(){
			
				let sendData={
			 		id:329
		    	};
		 		urlDataDetail(sendData).then(response => {
		 			let response1='H4sIAAAAAAAAAJ3UMQ7CMAwF0KugP2ewEzdpcxXUAbWAOiHUMqCqdyeVQAobfGXIYL8hP5ZXnEdkeNEk6vUgXTbLonC4zMjHFY/5Wm511ekdTsOCLKVp2rlIKOA2jTuBot/cr7BhobEwsbAloY8kDGyqoQ5H/oHsdwQ21cCmaspCz0L2jcYOgLHhNGw4TT1yVmBpuS9PZHWY35siqnxvimEvpE9FY4peQhfbhO0FDnuFqWAEAAA=';
//					console.log(unzip(response1))
		  			if(response.data.code==200){	  				
//		  				console.log(response)
		  			}else if(response.data.code!=200){
		  				console.log('获取数据失败')
		  			}				    		
		 		});
			},
　　　　　　watch:{
//　　　　　　　 firstName:'test',
//              lastName: function (val) {
//                  this.fullName = this.firstName + ' ' + val
//              }
　　　　　　
　　　　　　},
　			created(){

　　　　　
　　　　　　},
　　　　　　methods:{

//　　　　　　　　test(val){
//					this.fullName = val + ' ' + this.lastName
//				}，
				testTaget(){
					window.open('https://www.baidu.com')
				},
				testZip(){
					console.log(unzip(this.b64Data1))
				},
				//上传头像
				addPic(e){
	                e.preventDefault();
	                $('input[type=file]').trigger('click');
	                return false;
	            },
	            onFileChange(e) {
	                var files = e.target.files || e.dataTransfer.files;
	                if (!files.length)return; 
	                this.createImage(files);
	
	            },
	            createImage(file) {
	                if(typeof FileReader==='undefined'){
	                    alert('您的浏览器不支持图片上传，请升级您的浏览器');
	                    return false;
	                }
	                var image = new Image();         
	                var vm = this;
	                var leng=file.length;
	                for(var i=0;i<leng;i++){
	                    var reader = new FileReader();
	                    reader.readAsDataURL(file[i]); 
	                    reader.onload =function(e){
	                    vm.images=e.target.result;                                    
	                    };                 
	                }                        
	            },
	            delImage:function(){
	               this.images='';
	            },
	            uploadImage: function() {
	                console.log(this.images);
	                return false;
	                var obj = {};
	                obj.images=this.images
	                $.ajax({
	                    type: 'post',
	                    url: "upload.php",
	                    data: obj,
	                    dataType: "json",
	                    success: function(data) {
	                        if(data.status){
	                            alert(data.msg);
	                            return false;
	                        }else{
	                            alert(data.msg);
	                            return false;
	                        }
	                    }
	                });
	            }
　　　　　　}
    }
</script>
<style>
#content{width:220px;height:300px;margin:10px auto;padding-right:12px;overflow:hidden;}
#content p{color:#999;font-size:12px;margin:30px 0;text-align:left;text-indent:2em;}
	


</style>